<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>配送地址管理</title>
    <link rel="stylesheet" href="res/layui.css" media="all">
    <style type="text/css">
        .map-left {
            height:100vh;overflow: auto; padding: 10px;
        }
        .page {
            width: 100%; background-color: #eee;
        }
        .address-content .label {
            width: 30%;
            display: inline-block;
        }
        .address-content .text {
            width: 70%;
            display: inline-block;
        }
        .pointer {
            cursor: pointer;
        }
    </style>
    <!--Map-->
    <style type="text/css">
        #container {
            height:100vh;
        }
        #pickerBox {
            position: absolute;
            z-index: 9999;
            top: 50px;
            right: 30px;
            width: 300px;
        }

        #pickerInput {
            width: 200px;
            padding: 5px 5px;
        }

        #poiInfo {
            background: #fff;
        }

        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

        .amap_lib_placeSearch .poi-more {
            display: none!important;
        }
        /*删除图标*/
        .custom-content-marker .close-btn {
            position: absolute;
            top: -6px;
            right: -8px;
            width: 15px;
            height: 15px;
            font-size: 12px;
            background: #ccc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 15px;
            box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
        }

        .custom-content-marker .close-btn:hover{
            background: #666;
        }
        .custom-content-marker {
            transform:scale(0.5);//设置缩放比例
            -ms-transform:scale(0.5);
            -webkit-transform:scale(0.5);
            -o-transform:scale(0.5);
            -moz-transform:scale(0.5);
        }
    </style>
</head>
<body>

<div class="page">
    <div class="layui-row content">
        <div class="layui-col-md3 map-left">
            <div class="layui-card">
                <div class="layui-card-header">查找地址</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="line-height: 37px">
                            <div class="layui-input-inline">
                                <input type="tel" name="mobile" placeholder="输入用户账号" v-model="mobile"
                                       @keyup.enter="search"
                                       lay-verify="required|phone" autocomplete="off" class="layui-input">
                            </div>
                            <button type="button" class="layui-btn layui-btn-sm" @click="search">搜索</button>
                        </div>
                    </div>

                    <table class="layui-table">
                        <tr>
                            <td style="font-weight: bolder">昵称</td>
                            <td>{{user.mobile}}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bolder">角色</td>
                            <td>{{user.role_name}}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bolder">加入时间</td>
                            <td>{{user.create_at}}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bolder">最近下单</td>
                            <td>{{user.lastordertime}}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="layui-card" v-for="(item, index) in addressList" :key="index">
                <div class="layui-card-header">地址{{index+1}}
                    <span v-if="item.is_mark ==1">| 已标记</span>
                    <span v-if="item.is_mark ==2">| 物流单</span>
                </div>
                <div class="layui-card-body address-content">
                    <span class="label">联系人</span><span class="text">{{item.receiver}}</span>
                    <span class="label">联系电话</span><span class="text">{{item.tel}}</span>
                    <span class="label">地址</span><span class="text pointer" @click="suggest(item)">
                    {{item.city_name||''}}{{item.district_name||''}}{{item.detail}}</span>
                    <span class="label">标记地址</span>
                    <span class="text" style="width: 60%">
                        <button type="button" class="layui-btn layui-btn-xs"
                                :class="item.isMarking ? 'layui-btn-disabled': ''"
                                @click="setMark(item, index)">开始标记</button>
                        <button type="button" class="layui-btn layui-btn-xs" v-if="item.isMarking == 1"
                                @click="saveMark(item, index)">保存标记
                        </button>
                        <button type="button" class="layui-btn layui-btn-xs" @click="setExpress(item, index)">设为物流单
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 map-right">
            <div id="container"></div>
            <div id="pickerBox">
                <input id="pickerInput" placeholder="输入关键字选取地点" />
                <div id="poiInfo"></div>
            </div>
        </div>
    </div>
</div>

<script src="res/layui.js"></script>
<script src="res/vue.js"></script>
<script src="../../js/lib/rest.js"></script>
<script src="./res/axios.min.js"></script>
<script src="res/jquery.js"></script>
<script src="res/layer/layer.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=effff8de239e3c06c98cd3c45694afcc"></script>
<script type="text/javascript" src="map.js"></script>
<script src="http://webapi.amap.com/ui/1.1/main.js"></script>

<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '.map-left',
        data: {
            mobile: '',
            user: {},
            addressList:[],
            markerList:[],
            prefix: '/education/admin/pages/addressMark/',

            //map
            currentIndex: -1,
            poiPicker: null
        },
        methods: {
            post(url, param) {
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            loadData() {
                common_map.addMenu("更改位置", this.changePos)
                common_map.addMenu("删除位置", this.delMarker)
            },
            search() {
                if(!this.mobile) {
                    layer.msg('请输入正确的手机号');
                    return
                }
                var that = this;
                var roles = {'normal':'普通会员', 'vip':'高级会员', 'Operator':'运营人员','Admin':'管理员'}
                this.post(this.prefix + 'getAddressByUser', {'mobile': this.mobile}).then( (rs) => {
                    var res = rs.data;
                    if(res.code == 200) {
                        if(res.data !=null) {
                            var user = res.data;
                            user.role_name = roles[user.role_id] ||''
                            that.user = user;
                            that.addressList = user.addresslist;
                            for(let i=0; i< that.addressList.length; i++) {
                                let o = that.addressList[i]
                                let title = (o.city_name||'')+(o.district_name||'')+o.detail
                                o.address = title
                            }
                            that.showMarkInMap()
                        } else {
                            layer.msg('未找到此用户')
                        }
                    }
                })
            },
            showMarkInMap() {
                this.markerList = []
                let arr = []
                for(var i=0; i<this.addressList.length; i++) {
                   let o = this.addressList[i];
                   if(o.marklng && o.marklat) {
                       var a = common_map.createMarker2(i+1, [o.marklng, o.marklat])
                       a.setExtData(i)
                       a.setTitle(o.address)
                       if(o.is_mark == 2) {
                           a.setLabel({content: '物流'})
                       }
                       arr.push(a)
                       this.markerList.push(a)
                   } else {
                       this.markerList.push('')
                   }
                }
                this.initEvent(arr)
                common_map.clearMap()
                common_map.addMarkers(arr)
                common_map.setCenter()
            },
            initEvent(arr) {
                for(let i=0; i< arr.length; i++) {
                    let marker = arr[i]
                    common_map.onRightClick(marker, this.clickRight)
                }
            },
            clickRight(marker) {
                this.currentIndex = marker.getExtData()
            },
            setMark(item, index) {
                //设置地图点击事件
                this.$set(item, 'isMarking', 1);
                this.currentIndex = index;
                //如果地图已存在标记，则设置为移动
                var m = this.markerList[this.currentIndex];
                if(m) {
                    common_map.setMarkerDrag(m, true)
                }
                common_map.offClick(this.clickMap)
                common_map.onClick(this.clickMap)
            },
            saveMark(item, index) {
                this.$set(item, 'isMarking', 0);
                common_map.offClick(this.clickMap)
                var marker = this.markerList[this.currentIndex];
                marker.setTitle(item.address)
                common_map.setMarkerDrag(marker, false)
                var pos = marker.getPosition()
                var param = {  addressId: item.id, lng: pos.lng, lat: pos.lat, is_mark: 1 }
                this.post(this.prefix + 'mark', param).then( (rs) => {
                    var res = rs.data;
                    if(res.code == 200) {
                        this.afterAddMarker(this.currentIndex, marker)
                        layer.msg('标记成功')
                    } else {
                        layer.msg('标记失败')
                    }
                })
            },
            afterAddMarker(index, marker) {
                let item = this.addressList[index]
                let pos = marker.getPosition()
                //修改addressList
                this.$set(item, 'is_mark', 1);
                this.$set(item, 'marklng', pos.lng);
                this.$set(item, 'marklat', pos.lat);
                marker.setLabel({content: ''})
                //修改markerList
                this.markerList[index] = marker;
            },
            clickMap(e) {
                console.log('clicked map', e.lnglat)
                var marker = this.markerList[this.currentIndex]
                if(!marker) {
                    marker = common_map.createMarker2(this.currentIndex+1, e.lnglat);
                    common_map.onRightClick(marker)
                    this.markerList[this.currentIndex] = marker
                    common_map.addMarkers(marker)
                } else {
                    marker.setPosition(e.lnglat)
                }
            },
            changePos() {
                let item = this.addressList[this.currentIndex]
                this.setMark(item, this.currentIndex)
            },
            setExpress(item, index) {
                let addressId = this.addressList[index].id
                this.post(this.prefix + 'mark', {addressId, 'is_mark': 2}).then( (rs) => {
                    var res = rs.data;
                    if(res.code == 200) {
                        //this.afterDelMarker(index, 2)
                        let marker = this.markerList[index]
                        common_map.setMarkerDrag(marker, false)
                        this.$set(item, 'is_mark', 2);
                        marker.setLabel({content: '物流'})
                        layer.msg('设置成功')
                    } else {
                        layer.msg('设置失败')
                    }
                })
            },
            delMarker() {
                let item = this.addressList[this.currentIndex];
                let addressId = item.id
                this.post(this.prefix + 'cancelMark', {addressId}).then( (rs) => {
                    var res = rs.data;
                    if(res.code == 200) {
                        this.afterDelMarker(this.currentIndex, 0)
                        layer.msg('删除成功')
                    } else {
                        layer.msg('删除失败')
                    }
                })
            },
            afterDelMarker(index, isMark) {
                let item = this.addressList[index]
                common_map.clearMarker(this.markerList[index])
                //修改addressList
                this.$set(item, 'is_mark', isMark);
                this.$set(item, 'marklng', null);
                this.$set(item, 'marklat', null);
                //修改markerList
                this.markerList[index] = '';
            },
            loadUi() {
                let that = this
                //设置DomLibrary，jQuery或者Zepto
                //AMapUI.setDomLibrary($);
                //加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
                AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
                    poiPicker = new PoiPicker({
                        input: 'pickerInput' //输入框id
                    });
                    //监听poi选中信息
                    poiPicker.on('poiPicked', function(poiResult) {
                        console.log(poiResult)
                        let p = poiResult.item.location
                        that.afterClickSuggested(p)
                    });
                });
            },
            afterClickSuggested(pos) {
                /*let item = this.addressList[this.currentIndex]
                if(item && item.isMarking) {
                    this.clickMap({lnglat: pos})
                }*/
                common_map.locate(pos)
            },
            suggest(item) {
                let val = (item.city_name||'') + (item.district_name||'') + item.detail
                console.log('search:'+val)
                if(val) {
                    poiPicker.suggest(val);
                }
            },
        }
    })
    window.onload = function () {
        app.loadData()
        app.loadUi()
    }
</script>
</body>